<script setup lang="ts">
import { useWelcome } from "./utils/hook";

import DeskQuestion from "@/assets/desk/question.svg?component";
import DeskTask from "@/assets/desk/task.svg?component";
import DeskPaper from "@/assets/desk/paper.svg?component";
import DeskUser from "@/assets/desk/user.svg?component";
defineOptions({
  name: "Welcome"
});

const {
  produceQuestionSize,
  simulatorQuestionSize,
  producePaperSize,
  produceTaskSize,
  studentXtUserSize
} = useWelcome();
</script>

<template>
  <div>
    <el-card shadow="never">
      <el-row :gutter="40" justify="space-between">
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
          <el-card shadow="hover" class="mb-[10px] text-center">
            <div class="container">
              <div class="icon">
                <DeskQuestion width="100px" height="100px" />
              </div>
              <div class="text">
                <div class="text-large">
                  正式题库<el-tag type="success" size="large"
                    ><h1>{{ produceQuestionSize }}</h1></el-tag
                  >
                </div>
                <div class="text-large">
                  模拟题库<el-tag type="danger" size="large"
                    ><h1>{{ simulatorQuestionSize }}</h1></el-tag
                  >
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
          <el-card shadow="hover" class="mb-[10px] text-center">
            <div class="container">
              <div class="icon">
                <DeskPaper width="100px" height="100px" />
              </div>
              <div class="text">
                <div class="text-large">试卷总数</div>
                <div class="text-small">
                  <el-tag type="warning" size="large"
                    ><h1>{{ producePaperSize }}</h1></el-tag
                  >
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
          <el-card shadow="hover" class="mb-[10px] text-center">
            <div class="container">
              <div class="icon">
                <DeskTask width="100px" height="100px" />
              </div>
              <div class="text">
                <div class="text-large">任务总数</div>
                <div class="text-small">
                  <el-tag type="info" size="large"
                    ><h1>{{ produceTaskSize }}</h1></el-tag
                  >
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
          <el-card shadow="hover" class="mb-[10px] text-center">
            <div class="container">
              <div class="icon">
                <DeskUser width="100px" height="100px" />
              </div>
              <div class="text">
                <div class="text-large">学员总数</div>
                <div class="text-small">
                  <el-tag type="danger" size="large"
                    ><h1>{{ studentXtUserSize }}</h1></el-tag
                  >
                </div>
              </div>
            </div>
          </el-card>
        </el-col></el-row
      >
    </el-card>
  </div>
</template>
<style scoped lang="scss">
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon {
  margin-right: 10px;
}

.text {
  display: flex;
  flex-direction: column;
}

.text-large {
  font-size: 24px;
}

.text-small {
  margin-top: 10px;
  font-size: 13px;
}
</style>
